{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>服务监控中心</title>
	<link href="{% static 'css/sweetalert2.css' %}" rel="stylesheet">
	<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css">
		table{text-align: center;border-collapse: collapse;}
		table,th,td{border: 1px solid black;}
		#header {
			border: 1px solid;
			margin: 10px;
		}
		h3 {
			display: inline-block;
			padding: 10px 10px;
			margin: 10px;
		}
		h5 {
			display: inline-block;
			float: right;
			margin: 25px 15px;
		}
		#add_server {
			display: block;
			margin: 40px 10px;
			font-size: 16px;
		}
		table {
			width: 98%;
			margin: 20px 10px;
		}
		th {
			text-align: center;
		}
		tr {
			height: 42px;
		}
	</style>
</head>
<body>
	<div id="header">
		<h3 style="color: red">监控中心--首页</h3>
		<!--<h5><a href="{% url 'register' %}">注册</a></h5>-->
		<h5><a href="{% url 'logout' %}">登出</a></h5>
		<h5><a href="{% url 'index' %}">{{ username }}</a></h5>
	</div>
	<div>
		<input type="button" name="add_server" value="添加主机" id="add_server" class="btn btn-info" data-toggle="modal" data-target="#addModal">
			<div class="modal fade" id="addModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
				<div class="modal-dialog">
				<!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
					<div class="modal-content">
					<!--  显示模态框白色背景，所有内容都写在这个div里面  -->

						<div class="modal-header">
						<!--  模态框标题  -->
							<button type="button" class="close" data-dismiss="modal">&times;</button>
							<!--  关闭按钮  -->
							<h4 style="text-align: center;">添加主机--登录</h4>
							<!--  标题内容  -->
						</div>

						<div class="modal-body">
						<!--  模态框内容，我在此处添加一个表单 -->
							<form class="form-horizontal" role="form">
							{% csrf_token %}
								<input type="hidden" id="user_id" name="id" class="form-control well" value="{{ id }}"/>
								<div class="form-group">
									<label for="upwd" class="col-sm-2 control-label">ip</label>
										<div class="col-sm-9">
											<input type="text" id="new_ip" name="ip" class="form-control well" placeholder="IP"/>
										</div>
								</div>
								<div class="form-group">
									<label for="upwd" class="col-sm-2 control-label">username</label>
										<div class="col-sm-9">
											<input type="text" id="new_username" name="username" class="form-control well" placeholder="用户名"/>
										</div>
								</div>
								<div class="form-group">
									<label for="upwd" class="col-sm-2 control-label">password</label>
										<div class="col-sm-9">
											<input type="password" id="new_password" name="password" class="form-control well" placeholder="密码"/>
										</div>
								</div>
								<div class="form-group">
									<label for="upwd" class="col-sm-2 control-label">tag</label>
										<div class="col-sm-9">
											<input type="text" id="new_tag" name="tag" class="form-control well" placeholder="标签名"/>
										</div>
								</div>
							</form>
						</div>

						<div class="modal-footer">
						<!--  模态框底部样式，一般是提交或者确定按钮 -->
							<button id="add_submit" class="btn btn-primary" onclick="add_server('{{ id }}');" data-dismiss="modal">确定</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						</div>

					</div><!-- /.modal-content -->
				</div>
			</div> <!-- /.modal -->
	</div>
	<div>
		<table> 
			<thead>
				<tr>
					<th>id</th>
					<th>标签</th>
					<th>IP</th>
					<th>CPU</th>
					<th>内存</th>
					<th>硬盘</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id='tbody'>
				{% for host in hostlist %}
					<tr>
						<td>{{host.id}}</td>
						<td>{{host.tag}}</td>
						<td>{{host.ip}}</td>
						<td>{{host.cpu}}核</td>
						<td>{{host.vir_mem}}MB</td>
						<td>{{host.mem}}GB</td>
						<td>{{host.status}}</td>
						<td>
							<a href="{% url 'detail' host.id %}" class="btn btn-info">查看</a>
							<a data-toggle="modal" id='{{ host.id }}' data-target="#editModal" class="btn btn-success edit" onclick="doEdit('{{ host.id }}');">编辑</a>
							<a onclick="doDel('{{ host.id }}');" class="btn btn-danger">删除</a>     
						</td>
					</tr>
				{% endfor %}
				<div class="modal fade" id="editModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
					<div class="modal-dialog">
					<!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
						<div class="modal-content">
						<!--  显示模态框白色背景，所有内容都写在这个div里面  -->

							<div class="modal-header">
							<!--  模态框标题  -->
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<!--  关闭按钮  -->
								<h4>编辑主机信息</h4>
								<!--  标题内容  -->
							</div>

							<div class="modal-body">
							<!--  模态框内容，我在此处添加一个表单 -->
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="upwd" class="col-sm-2 control-label">新标签名</label>
											<div class="col-sm-9">
												<input type="hidden" name="id" class="form-control well" placeholder="标签名"/>
												<input type="text" id="rename_tag" name="new_tag" class="form-control well" placeholder="标签名"/>
											</div>
									</div>
								</form>
							</div>

							<div class="modal-footer">
							<!--  模态框底部样式，一般是提交或者确定按钮 -->
								<button id="edit_submit" class="btn btn-primary" data-dismiss="modal">确定</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							</div>

						</div><!-- /.modal-content -->
					</div>
				</div> <!-- /.modal -->
				</tbody>
			</table>
			<br>
			<div style="text-align: center;">
			{% for i in plist %}
                {% if i == pIndex %}
                    <b style="color:red">{{i}}</b>
                {% else %}
                    <a href="{% url 'index' i %}">{{i}}</a>
                {% endif %}
            {% endfor %}
            </div>
	</div>
	
	<!-- js样式  -->
	<script src="{% static 'js/sweetalert2.js' %}"></script>
	<script type="text/javascript">
		//删除一条主机记录
		function doDel(host_id) {
			swal({
				type: 'warning',
				title: '确定删除该条主机记录吗？',
				showCancelButton: true, 
			  	confirmButtonColor: '#3085d6',
			  	cancelButtonColor: '#d33',
			  	confirmButtonText: '确定', 
			  	cancelButtonText: '取消'
			}).then(result => {
				  if (result.value) {
				  	$.ajax({
						url: '/delete',
						type: 'post',
						dataType: 'json',
						data: {
							'id': host_id,
						},
						success:function(data){
							if(data.code==0){
								swal(
									'删除',
									'该记录已成功删除！',
									'success'
								);
								window.location = "{% url 'index' %}"
							}else{
								swal(
									'删除失败',
									'error'
								);
							}
						}
				  	});
				  }else {
				    // handle dismiss, result.dismiss can be 'cancel', 'overlay', 'close', and 'timer'
				    console.log(result.dismiss)
				  }
				})
		}

		$.ajaxSetup({
		    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
		});

		//添加一条主机记录
		function add_server(user_id) {
			console.log("添加主机中....")
			var id = user_id//document.getElemtById()
			var ip = document.getElementById('new_ip').value;
			var host_user = document.getElementById('new_username').value;
			var host_password = document.getElementById('new_password').value;
			var tag = document.getElementById('new_tag').value;
			swal({
				type: 'info',
				title: '请等待10-30秒',
				text: '系统正在为你建立连接。。。'
			});
			$.ajax({
				url: '/add',
				type: 'post',
				dataType: 'json',
				data: {
					'id': id,
					'ip': ip,
					'username': host_user,
					'password': host_password,
					'tag': tag
				},
				success:function(data){
					if(data.code == 0){
						/*var tab = document.getElementById('tbody');
						var da = data.data;
						var tr=document.createElement("tr");
						var td1=document.createElement("td");
						var td2=document.createElement("td");
						var td3=document.createElement("td");
						var td4=document.createElement("td");
						var td5=document.createElement("td");
						var td6=document.createElement("td");
						var td7=document.createElement("td");
						var td8=document.createElement("td");
						td1.innerHTML= da.id;
						td2.innerHTML= tag;
						td3.innerHTML= ip; 
						td4.innerHTML= da.cpu;
						td5.innerHTML= da.vir_mem;
						td6.innerHTML= da.mem;
						td7.innerHTML= da.status;
						td8.innerHTML= ''
						//var tab=document.getElementById("tbody");
						tab.appendChild(tr);
						tr.appendChild(td1);
						tr.appendChild(td2);
						tr.appendChild(td3);
						tr.appendChild(td4);
						tr.appendChild(td5);
						tr.appendChild(td6);
						tr.appendChild(td7);
						tr.value = da.id;*/
						swal({
							type: 'success',
							title: '添加成功',
						});
						window.location = "{% url 'index' %}";
					}
				}
			});
		}

		function doEdit(data_id) {
			$('.edit').append('<input type="button" name="commit_div" style="display: none;" data_id=' + data_id + ' />');
		}

		//编辑修改一条记录的tag
		$('#edit_submit').on('click', function(){
			var host_id = document.getElementsByName('commit_div')[0].attributes['data_id'].value;   //项目id
			var new_tag = document.getElementById('rename_tag').value
			console.log(new_tag)
			$.ajax({
				url: '/edit',
				type: 'post',
				dataType: 'json',
				data: {
					'id': host_id,
					'new_tag': new_tag
				},
				success:function(data){
					console.log(data)
					if(data.code==0){
						swal({
							type: 'success',
							title: '修改成功'
						});
						$('#rename_tag').val("");
						window.location = "{% url 'index' %}"
					}else{
						swal({
							type: 'error',
							title: '修改失败'
						});
					}
				}
		  	});
		})
	</script>
</body>
</html>